<template>
  <div>
    <el-table :data="logList" border stripe :height="tableHeight">
      <el-table-column align="center" prop="userName" label="登录用户"></el-table-column>
      <el-table-column align="center" prop="title" label="执行操作"></el-table-column>
      <el-table-column align="center" prop="requestUri" label="请求URL"></el-table-column>
      <el-table-column align="center" prop="remoteAddr" label="IP"></el-table-column>
      <el-table-column align="center" prop="ipRegion" label="地址"></el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="currentPage"
      :page-sizes="[10, 20, 40, 80, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" background style="margin-top: 15px;">
    </el-pagination>
  </div>
</template>

<script>
import { getLogListApi } from '@/api/log'
export default {
  data() {
    return {
      logList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      //表格高度
      tableHeight: 0
    }
  },
  created() {
    this.getLogList()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 150
    })
  },
  methods: {
    async getLogList() {
      let parm = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      let res = await getLogListApi(parm)
      if (res && res.code === 200) {
        this.total = res.data.total
        this.logList = res.data.records
      }
    },
    // 分页器事件
    currentChange(val) {
      this.currentPage = val
      this.getLogList()
      console.log('当前页', val)
    },
    sizeChange(val) {
      console.log('页容量', val)
      this.currentPage = 1
      this.pageSize = val
      this.getLogList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
